<template>
  <div class="examins">
    <van-nav-bar title="选择题考试" left-text="返回" @click-left="onClickLeft" left-arrow :style="rgba[0]" />
    <div v-for="(item,i) of subdata" :key="i">
      <template v-if="item.quiz_list_id==id">
        <div class="examin">
          <p class="p1" :v-model="num">{{num+1+"."}}{{item.quiz_list[num].title}}</p>
          <ul class="ulli" :v-model="num">
            <li
              v-for="(items,j) of item.quiz_list[num].options"
              :key="j"
              @click="fn(j,item.quiz_list[num].answer)"
              ref="list"
            >{{arr[j]}}{{items}}</li>
          </ul>
          <div style="width:100%;height:1rem;background-color:#f5f5f5;"></div>
          <p class="p2" :v-model="num" ref="explain">
            <span class="sp1">最佳解释:&nbsp;</span>
            {{item.quiz_list[num].reason}}
          </p>
        </div>
        <div class="bto">
          <van-button type="primary" size="small" @click="upperfn()">上一题</van-button>
          <van-button type="primary" size="small" @click="lowerfn(item.quiz_list.length)">下一题</van-button>
        </div>
        <div class="notebook">
          <van-icon name="orders-o" @click="show = true" />
          <van-overlay :show="show">
            <div class="wrapper" @click.stop @click="show = false">
              <div class="block">
                <p>题目列表</p>
                <ul>
                  <li
                    v-for="(sub_list,k) of state_list"
                    :key="k"
                    @click="shows(k)"
                    ref="sub_list"
                  >{{k+1}}</li>
                </ul>
              </div>
            </div>
          </van-overlay>
        </div>
      </template>
    </div>
    <div>
      <!-- 底部内容 -->
      <div class="start">
        <div @click="colle">
          <span>收藏</span>
          <van-icon name="star-o" />
        </div>
        <div @click="explain">
          <p>查看分析</p>
        </div>
        <div class="nav_Bar">
          <p @click="err_show = true">错题本{{error_num}}</p>
          <van-overlay :show="err_show">
            <div class="wrapper" @click.stop @click="err_show = false">
              <div class="block">
                <p>题目列表</p>
                <ul>
                  <li
                    v-for="(sub_list,l) of err_arr"
                    :key="l"
                    @click="showerr(sub_list)"
                    ref="sub_err"
                  >{{sub_list}}</li>
                  <p v-if="err_arr.length==0" class="err_arr" style="color:#646566">暂无数据</p>
                </ul>
              </div>
            </div>
          </van-overlay>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//考试
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("apiDataModules");
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  name: "examin",
  props: ["id"],
  data() {
    return {
      arr: ["A、", "B、", "C、", "D、"],
      num: 0, //题目次选
      dataArr: [],
      choice: [], //选择题题目
      subdata: [], //全部题目
      state_list: [], //二维数组
      error_num: 0, //错误题数
      answer_state_lock: [], //监听选择状态
      show: false, //全部题集
      err_show: false, //错误题集
      err_arr: [], // 错误题数组
      rgba:{},//主题风格
    };
  },
  created() {},
  async mounted() {
    this.subdata = this.apidatas.all_quiz_list;
    await this.quiz();
    this.forss();
    this.rgba = JSON.parse(localStorage.getItem("bakcColor"))
  },
  activated() {},
  computed: {
    ...mapState(["apidatas"])
  },
  methods: {
    shows(id) {
      //全部题集题目下标
      this.num = id; //题目切换
      let aws = this.state_list[this.num][2];
      this.allList(aws,id)
    },
    showerr(id) {
      //错题本
      this.num = id - 1; //题目切换
      let aws = this.state_list[this.num][2];
      this.allList(aws,this.num)
    },
    allList(aws,id){//全部题和错误题的调用
      let lis = this.$refs.list;
      for (let items of this.state_list){
        if (items.length == 0 && items == this.state_list[id]) {//没有选择的时候
          lis.forEach(errlist => {
            errlist.style.color = "#000";
          });
          return
        } else if (items[1] == items[2] && items == this.state_list[id]) {//正确的时候
          lis.forEach(errlist => {
            errlist.style.color = "#000";
          });
          lis[aws].style.color = "#07c160";
          return
        } else if (items[1] !== items[2] && items == this.state_list[id]) {//错误的时候
          lis.forEach(item => {
            item.style.color = "red";
          });
          lis[aws].style.color = "#07c160";
          return
        }
      }
    },
    forss() {
      for (var i = 0; i < this.choice.length; i++) {
        this.state_list.push([]);
      }
    },
    onClickLeft() {
      //返回时，清除数据
      this.$router.go(-1);
      this.state_list = [];
      this.error_num = 0;
      this.num = 0;
    },
    fn(j, answer) {
      //对与错
      // 点击的索引值  正确的索引值  当前的题目
      let arr = this.$refs.list;
      let suList = this.$refs.sub_list;
      if (this.answer_state_lock[this.num]) {
        //监听答题状态
        return;
      }
      if (j == answer) {
        //正确答案
        //单选
        // console.log(suList[this.num])
        this.changeArrValue(this.state_list, this.num, j, "#07c160", answer);
        arr[answer].style.color = "#07c160"; //题目列表正确颜色
        suList[this.num].style.color = "#00a400";
        suList[this.num].style.border = "1px solid #00a400";
        suList[this.num].style.background = "rgba(0,164,0,0.17);";
        this.answer_state_lock[this.num] = true; //每一题的状态
      } else {
        let suList = this.$refs.sub_list;
        if (this.error_num !== this.choice.length) {
          //记录错误提数
          this.error_num += 1;
        }
        suList[this.num].style.color = "#e8571b"; //题目错误本颜色
        suList[this.num].style.border = "1px solid #e8571b";
        suList[this.num].style.background = "rgba(255,96,30,0.17);";
        this.changeArrValue(this.state_list, this.num, j, "red", answer); //题目错误颜色
        arr.forEach(item => {
          //错误答案
          item.style.color = "red";
        });
        arr[answer].style.color = "#07c160";
        this.err_arr.push(this.num + 1);
        // console.log(this.err_arr)
        this.answer_state_lock[this.num] = true; //每一题的状态
      }
    },
    changeArrValue(arr, i, j, val, answer) {
      //二维空数组 题目下标 点击的选项下标  样式
      let array = arr[i]; //进入二维数组
      array.push(val);
      array.push(j);
      array.push(answer);
    },
    upperfn() {
      //上一题
      if (this.num !== 0) {
        this.num -= 1;
      } else {
        this.num = 0;
      }
      if (this.state_list[this.num].length > 0) {
        //重新渲染已选答案
        let lis = this.$refs.list;
        if (this.state_list[this.num][1] == this.state_list[this.num][2]) {
          //正确答案就重新渲染绿色
          lis.forEach(item => {
            item.style.color = "#000";
          });
          lis[this.state_list[this.num][2]].style.color = this.state_list[
            this.num
          ][0];
        } else {
          //错误时重新渲染的答案
          let ans = this.state_list[this.num][2];
          lis.forEach(item => {
            item.style.color = this.state_list[this.num][0];
          });
          lis[ans].style.color = "#07c160";
        }
      } else {
        //没有选择时，重新渲染
        let lis = this.$refs.list;
        lis.forEach(item => {
          item.style.color = "#000";
        });
      }
    },
    lowerfn(datas) {
      //下一题
      if (this.num !== datas - 1) {
        this.num += 1;
      } else {
        this.num = datas - 1;
      }
      if (this.state_list[this.num].length > 0) {
        //重新渲染已选答案
        let lis = this.$refs.list;
        if (this.state_list[this.num][1] == this.state_list[this.num][2]) {
          lis.forEach(item => {
            item.style.color = "#000";
          });
          lis[this.state_list[this.num][2]].style.color = this.state_list[
            this.num
          ][0];
        } else {
          let ans = this.state_list[this.num][2];
          lis.forEach(item => {
            item.style.color = this.state_list[this.num][0];
          });
          lis[ans].style.color = "#07c160";
        }
      } else {
        let lis = this.$refs.list;
        lis.forEach(item => {
          item.style.color = "#000";
        });
      }
    },
    quiz() {
      //调用vuex数据
      for (let item of this.subdata) {
        if (item.quiz_list_id == this.id) {
          this.choice = item.quiz_list;
          return;
        }
      }
    },
    colle() {
      //收藏
      // console.log(this.id, this.num);
      let subInfo = {
        listId: this.id,
        id: this.num
      };
      let subId = JSON.parse(localStorage.getItem("sublist")) || [];
      let bool = subId.some(item => {
        if (subInfo.listId == item.listId && subInfo.id == item.id) {
          Toast({
            message: "已经收藏过了",
            icon: "cross"
          });
          return true;
        }
      });
      if (!bool) {
        subId.push(subInfo);
        localStorage.setItem("sublist", JSON.stringify(subId));
        Toast.success("收藏成功");
      }
    },
    explain() {
      this.$refs.explain[0].style.display = "block";
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/examin/examin.scss";
</style>